<template>
  <div class="blogAdd">
    <el-tabs type="border-card">
      <el-tab-pan label="添加新博客">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="文章分类" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择文章分类">
              <el-option
                v-for="(item, key) in classify"
                :key="key"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文章内容" prop="content">
            <Quill @content="content"></Quill>
          </el-form-item>
          <el-button
            type="primary"
            @click="postBlog('ruleForm')"
            style="margin: 0 auto"
            >提交</el-button
          >
        </el-form>
      </el-tab-pan>
    </el-tabs>
  </div>
</template>

<script>
import { Loading } from "element-ui";
import time from "../../assets/js/time";
import Quill from "./quill.vue";
export default {
  name: "blogAdd",
  components: {
    Quill,
  },
  data() {
    return {
      ruleForm: {
        title: "",
        region: "",
        content: "",
      },
      rules: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        region: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      classify: {
        name: "",
        // value:"",
      },
    };
  },
  methods: {
    content(value) {
      this.ruleForm.content = value;
    },

    getClassify() {
      this.$http.get("/classify").then(
        (res) => {
          this.classify = res.data;
          console.log(res.data);
        },
        (err) => {
          console.log(err);
        }
      );
    },
    postBlog(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = {
            title: this.ruleForm.title,
            region: this.ruleForm.region,
            content: this.ruleForm.content,
            time: time.newDate(),
            name: sessionStorage.getItem("name"),
          };
          this.$http.post("/blog", data).then((res) => {
            location.reload();
            this.$message({
              message: "提交成功",
              type: "success",
            });
          });
        } else {
          this.$message({
            message: "内容不能为空",
            type: "error",
          });
          return false;
        }
      });
    },
  },
  mounted() {
    this.getClassify();
    // this.handleCentent()
  },
};
</script>

<style lang="less" scoped>
.blogAdd {
  width: 100%;
  h1 {
    margin: 10px 0px 20px 25px;
    color: rgb(64, 158, 255);
  }
}
</style>
